<template>
    <div>
        <navigator :level="level" :pathName="pathName"></navigator>
        <div class="view">
            <message ref="message"></message>
            <confirm ref="confirm"></confirm>
            <el-form :model="user" :rules="rules" ref="userForm" label-width="100px">
                <el-form-item label="用户选择" prop="name" style="width: 30%">
                    <el-select v-model="user.name" filterable clearable placeholder="用户列表" @change="handleChange">
                        <el-option v-for="user in users" :label="user.label" :value="user.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色展示">
                    <el-tag v-for="showRole in showRoles" :closable="true"
                            :key="showRole.key" :close-transition="false"
                            @close="handleClose(showRole)" class="tag">
                        {{showRole.name}}
                    </el-tag>
                    <el-button class="el-icon-plus add" title="添加角色"
                               @click.native="dialogFormVisible = true"></el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleReset">重置</el-button>
                    <el-button type="primary" @click="handleSubmit">保存</el-button>
                </el-form-item>
            </el-form>

            <el-dialog title="用户可选角色列表" v-model="dialogFormVisible">
                <el-checkbox-group v-model="checkedRoles">
                    <el-checkbox v-for="role in roles" :label="role.label"></el-checkbox>
                </el-checkbox-group>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmRole">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Navigator from '../../common/navigator.vue';
    import Message from '../../common/message.vue';
    import Confirm from '../../common/confirm.vue';

    export default {
        data () {
            return {
                level: 1,
                pathName: '用户角色',
                users: [],
                user: {
                    name: ''
                },
                rules: {
                    name: [
                        {type: 'integer', required: true, message: '请选择用户', trigger: 'change'}
                    ]
                },
                roles: [],
                showRoles: [],
                checkedRoles: [],
                dialogFormVisible: false
            };
        },
        components: {
            Navigator, Message, Confirm
        },
        methods: {
            handleClose (role) {
                this.showRoles.splice(this.roles.indexOf(role), 1);
                this.checkedRoles.splice(this.checkedRoles.indexOf(role.name), 1);
            },
            handleChange (val){
                this.$http.get('/admin/role/user?userId=' + val).then((response) => {
                    if (response.ok) {
                        let data = response.data.data;
                        let showRoles = [];
                        let checkedRoles = [];
                        data.checkedRoles.forEach((role) => {
                            checkedRoles.push(role.name);
                            showRoles.push({name: role.name});
                        });
                        this.showRoles = showRoles;
                        this.checkedRoles = checkedRoles;
                        let roles = [];
                        data.roles.forEach((role) => {
                            roles.push({label: role.name});
                        });
                        this.roles = roles;
                    } else {
                        console.error(response);
                    }
                }, (response) => {
                    console.error(response);
                });
            },
            handleSubmit () {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        let param = {};
                        param.name = this.user.name;
                        param.roles = this.checkedRoles;
                        this.$http.post('/admin/user/role', JSON.stringify(param)).then((response) => {
                            if (response.ok) {
                                this.$refs.message.success({
                                    message: '保存成功!'
                                });
                            } else {
                                this.$refs.message.error({
                                    message: '保存失败!'
                                });
                            }
                        }, (response) => {
                            console.error(response);
                        });
                    } else {
                        this.$refs.message.warning({
                            message: '请填写完整信息!'
                        });
                        return false;
                    }
                });
            },
            handleReset () {
                this.$refs.confirm.show({
                    title: '系统提示',
                    message: '确认重置表单数据?',
                    param: this.$refs,
                    ok (param) {
                        console.info(param);
                        param.userForm.resetFields();
                        console.info('reset.');
                    },
                    cancel (param) {
                        console.info('reset cancel.');
                    }
                });
            },
            confirmRole () {
                var showRoles = [];
                var checkedRoles = this.checkedRoles;
                for (let i in checkedRoles) {
                    showRoles.push({key: i, name: checkedRoles[i]});
                }
                this.showRoles = showRoles;
                this.dialogFormVisible = false;
            }
        },
        mounted(){
            this.$http.get('/admin/user/index').then((response) => {
                if (response.ok) {
                    let data = response.data.data;
                    let users = [];
                    data.data.forEach(function (user) {
                        users.push({label: user.name, value: user.id});
                    });
                    this.users = users;
                } else {
                    console.error(response);
                }
            }, (response) => {
                console.error(response);
            });
        }
    }
</script>

<style scoped>
    .tag {
        margin: auto 5px;
    }

    .add {
        cursor: pointer;
        margin: auto 10px;
    }
</style>
